<template>
  <view class="u-flex-col u-row-center u-col-center">
    <view class="u-flex-col gxcent">
      <view v-for="(item,index) in list" :key="index"
            class="u-margin-top-20 u-border-ra20 u-bg-white u-flex border-bootom-1">
        <image :src="item.robotImage" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;"></image>
        <view class="u-flex-col u-margin-left-20 clix u-row-between" style="width: 300rpx;">
          <text class="u-font-32 u-color-balck3">{{ item.robotTitle }}</text>
          <text class="u-font-26 u-color-balck6 u-margin-top-10">订单金额：￥{{ item.money }}</text>
          <text class="u-font-26 u-color-balck6 u-margin-top-10">{{ item.appointmentTime }}</text>
        </view>

        <view class="u-flex-col u-margin-left-20 clix u-row-between">
          <view class="lxbtn" @click="signOrder(item.id)">
            <text class="u-font-26 zhuti_color" style="color: #19be6b;">签到</text>
          </view>
          <view class="lxbtn u-margin-top-10" style="border-color: red;" @click="appointmentCancel(item.id)">
            <text class="u-font-26 zhuti_color" style="color: red;">取消预约</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {cancelOrder, listOrderByUserId, signOrder} from "@/api/qd/order";
import store from "@/store";
import config from "@/config";

export default {
  data() {
    return {
      title: 'Hello',
      list: [],
    }
  },
  onLoad() {
    this.listOrderByUserId();
  },
  onShow() {
    this.listOrderByUserId();
  },
  methods: {
    listOrderByUserId() {
      listOrderByUserId(store.getters.userId).then((res) => {
        this.list = res.data;
        this.list.forEach((item) => {
          item.robotImage = config.baseUrl + item.robotImage;
        })
        if (this.list.length === 0) {
          this.$modal.showToast2("暂无预约记录！", 500);
        }
      })
    },
    signOrder(id) {
      signOrder(id).then((res) => {
        this.$modal.msgSuccess("签到成功！");
        this.listOrderByUserId();
      }).catch(err => {
        reject(err);
      })
    },
    appointmentCancel(id) {
      this.$modal.confirm('您确定要取消预约吗？').then(() => {
        cancelOrder(id).then((res) => {
          this.$modal.msgSuccess("取消预约成功！");
          this.listOrderByUserId();
        }).catch(err => {
          reject(err);
        })
      })
    }
  }
}
</script>

<style>
@import "@/static/scss/u-ui.css";

page {
  background-color: #F6F6F6;
}

.gxcent {
  width: 710rpx;
}

.lxbtn {
  width: 140rpx;
  height: 78rpx;
  border: 1rpx solid #19be6b;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
}
</style>